<template>
	<view class="my-content">
		<view>
			<!--相册页-->
			<view class="warn">
				<view class="tabs">
					<ul>
						<li v-for="(item, index) in tabs" :key="index" @click="tabsclick(index)" :class="tabindex==index?'active':''">
							{{item.key}}
						</li>
					</ul>
				</view>
				<view class="content">
					<view class="img-group" v-for="(item,index) in albumList" :key="index">
						<view class="title">第{{item.page}}页</view>
						<view class="img-container">
							<view class="img-box" v-for="(item1,index1) in item.list" :key="index1"> <!-- @click="preview(item.list)"-->
								<image lazy-load="true" mode="widthFix" :src="item1+item.page+index1"></image>
							</view>
							<view style="clear: both;"></view>
						</view>
					</view>
					<view class="load-more" v-if="albumList.length<1">
						没有更多数据了
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bottom: {
				type: Number
			}
		},
		data() {
			return {
				tabs: [{
					key: '风景',
					value: 'https://api.btstu.cn/sjbz/api.php?method=mobile&lx=fengjing'
				}, {
					key: '动漫',
					value: 'https://api.btstu.cn/sjbz/api.php?method=mobile&lx=dongman'
				}, {
					key: '美女',
					value: 'https://api.btstu.cn/sjbz/api.php?method=mobile&lx=meizi'
				}, {
					key: '随机',
					value: 'https://api.btstu.cn/sjbz/api.php?method=mobile&lx=suiji'
				}],
				tabindex: 0,
				pageNow: 1,
				albumList: []
			}
		},
		created() {
			this.fillData();
		},
		watch: {
			tabindex(val) {
				console.log(val)
				this.fillData();
			},
			bottom(val) {
				this.pageNow = val;
				this.fillData();
			}
		},
		onUnload() {
			this.tabindex = 0;
		},
		methods: {
			tabsclick(index) { //tab 切换
				this.tabindex = index;
				this.pageNow = 1;
			},
			fillData() {
				let imgArr = [];
				imgArr.push({
					page: this.pageNow,
					list: new Array(10).fill(this.tabs[this.tabindex].value)
				})
				if (this.pageNow === 1) {
					this.albumList = imgArr;
				} else {
					this.albumList = this.albumList.concat(imgArr);
				}
				console.log(this.tabs[this.tabindex].key, imgArr)
			},
			preview(item) {
				uni.previewImage({
					urls: item // 需要预览的图片http链接列表
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.my-content {
		.my-header {
			padding: 20px 0 20px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.header-left {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-right {
				flex: 1;
				padding-left: 20px;
				height: 200rpx;

				.header-name {
					font-size: 40rpx;
					font-weight: 550;
					color: #333333;
				}

				.header-brief {
					padding-top: 10px;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}

				.header-city {
					padding-top: 10px;
					font-size: 28rpx;
				}
			}
		}

		.warn {
			.load-more {
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-size: 13px;
				color: #CCCCCC;
			}

			.tabs {
				height: 40px;
				background: #FFFFFF;
				margin: 0 20px;
				padding: 17px;

				ul {
					display: flex;
					border-bottom: 1px solid #E5E5E5;

					li {
						height: 40px;
						line-height: 40px;
						flex: 1;
						font-family: PingFangSC-Regular;
						font-size: 15px;
						color: #999999;
						letter-spacing: 0;
						text-align: center;
						list-style-type: none;
					}

					li.active {
						position: relative;
						font-family: PingFangSC-Medium;
						font-size: 15px;
						color: #223662;
						letter-spacing: 0;
						text-align: center;
						height: 40px;
						line-height: 40px;
					}

					.active::after {
						content: '';
						width: 30px;
						height: 2px;
						background: #223662;
						position: absolute;
						left: 50%;
						bottom: 0;
						margin-left: -15px;
					}
				}
			}

			.content {
				margin: 0 5vw;
				background-color: #FFFFFF;

				.img-group {
					width: auto;
					height: auto;

					.title {
						width: 100%;
						height: 30px;
						line-height: 30px;
						font-size: 14px;
						background-color: #FFFFFF;
						position: sticky;
						top: 0px;
						z-index: 5;
					}

					.right {
						display: flex;
						justify-content: space-between;

						.txt {
							color: #999999;
							font-size: 13px;
						}
					}

					.img-container {
						width: 100%;

						.img-box {
							image {
								width: 40vw;
								margin-bottom: 5vh;
								padding-left: 3vw;
								float: left;
							}
						}
					}
				}

				.button-submit {
					padding: 25px;
					text-align: center;
					position: sticky;
					bottom: 15px;
					z-index: 9999;

					button {
						width: 90%;
						height: 35px;
						line-height: 35px;
						background-color: #223662;
						color: #FFFFFF;
						font-size: 14px;
						border-radius: 20px;
					}
				}

				.text {
					margin: 15px 15px;
					font-size: 13px;
					color: #999999;

				}
			}
		}

	}
</style>
